<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="el-icon-document">已发任务</span>
        <el-button style="float: right;" size="small" type="danger" @click="goBack">关闭</el-button>
      </div>
      <el-tabs tab-position="top" v-model="activeName" @tab-click="handleClick">
        <!-- 表单信息 -->
        <el-tab-pane label="表单信息" name="1">
          <el-col :span="16" :offset="4">
            <v-form-render ref="vFormRef" />
          </el-col>
        </el-tab-pane>
        <!-- 流程流转记录 -->
        <el-tab-pane label="流转记录" name="2">
          <el-col :span="16" :offset="4">
            <div class="block">
              <el-timeline>
                <el-timeline-item
                  v-for="(item, index) in flowRecordList"
                  :key="index"
                  :icon="setIcon(item.finishTime)"
                  :color="setColor(item.finishTime)"
                >
                  <p style="font-weight: 700">{{ item.taskName }}</p>
                  <el-card :body-style="{ padding: '10px' }">
                    <el-descriptions class="margin-top" :column="1" size="small" border>
                      <el-descriptions-item v-if="item.assigneeName" label-class-name="my-label">
                        <template #label><i class="el-icon-user"></i>办理人</template>
                        {{ item.assigneeName }}
                        <el-tag type="info" size="small">{{ item.deptName }}</el-tag>
                      </el-descriptions-item>
                      <el-descriptions-item v-if="item.candidate" label-class-name="my-label">
                        <template #label><i class="el-icon-user"></i>候选办理</template>
                        {{ item.candidate }}
                      </el-descriptions-item>
                      <el-descriptions-item label-class-name="my-label">
                        <template #label><i class="el-icon-date"></i>接收时间</template>
                        {{ item.createTime }}
                      </el-descriptions-item>
                      <el-descriptions-item v-if="item.finishTime" label-class-name="my-label">
                        <template #label><i class="el-icon-date"></i>处理时间</template>
                        {{ item.finishTime }}
                      </el-descriptions-item>
                      <el-descriptions-item v-if="item.duration" label-class-name="my-label">
                        <template #label><i class="el-icon-time"></i>耗时</template>
                        {{ item.duration }}
                      </el-descriptions-item>
                      <el-descriptions-item v-if="item.comment" label-class-name="my-label">
                        <template #label><i class="el-icon-tickets"></i>处理意见</template>
                        {{ item.comment.comment }}
                      </el-descriptions-item>
                    </el-descriptions>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-col>
        </el-tab-pane>
        <!-- 流程图 -->
        <el-tab-pane label="流程图" name="3">
          <bpmn-viewer :flow-data="flowData" :proc-ins-id="taskForm.procInsId" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getProcessVariables, flowXmlAndNode } from '@/api/flowable/definition';
import {flowRecord} from "@/api/flowable/finished";
import BpmnViewer from '@/components/Process/viewer';

const vFormRef = ref(null);
const activeName = ref('1');
const flowData = ref({});
const flowRecordList = ref([]);
const taskForm = reactive({
  multiple: false,
  comment: '',
  procInsId: '',
  instanceId: '',
  deployId: '',
  taskId: '',
  procDefId: '',
});

const route = useRoute();
const router = useRouter();

onMounted(() => {
  taskForm.deployId = route.query.deployId;
  taskForm.taskId = route.query.taskId;
  taskForm.procInsId = route.query.procInsId;
  processVariables(taskForm.taskId);
  // console.log(processVariables(taskForm.taskId));
  getFlowRecordList(taskForm.procInsId, taskForm.deployId);
});

const handleClick = (tab) => {
  if (tab.props.name === '3') {
    flowXmlAndNode({ procInsId: taskForm.procInsId, deployId: taskForm.deployId }).then((res) => {
      flowData.value = res.data;
    });
  }
};

const setIcon = (val) => {
  return val ? 'el-icon-check' : 'el-icon-time';
};

const setColor = (val) => {
  return val ? '#2bc418' : '#b3bdbb';
};

/** 流程流转记录 */
const getFlowRecordList = (procInsId, deployId) => {
  const params = { procInsId, deployId };
  flowRecord(params).then((res) => {
    flowRecordList.value = res.data.flowList;
  }).catch(() => {
    goBack();
  });
};

/** 获取流程变量内容 */
const processVariables = (taskId) => {
  if (taskId) {
    getProcessVariables(taskId).then((res) => {
      nextTick(() => {
        vFormRef.value.setFormJson(res.data.formJson);
        nextTick(() => {
          vFormRef.value.setFormData(res.data);
          nextTick(() => {
            vFormRef.value.disableForm();
          });
        });
      });
    });
  }
};

const goBack = () => {
  const obj = { path: '/task/process', query: { t: Date.now() } };
  router.push(obj);
};
</script>

<style lang="scss" scoped>
.test-form {
  margin: 15px auto;
  width: 800px;
  padding: 15px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.my-label {
  background: #E1F3D8;
}
</style>